<template>
  <div style="border:1px solid red;width:200px;height:200px" v-show="visible">
    <div v-html="innerContent" v-if="innerContent">
    </div>
    <div v-else>
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, isVNode, ref, VNode, watch } from 'vue';

export default defineComponent({
  props: {
    content: [String,Object],
    modelValue: {
      type: Boolean,default: false
    }
  },
  setup(props: any) {
    const visible = ref(false);
    const innerContent = ref<string | VNode>('');
    watch(() => props.modelValue,(v) => {
      visible.value = v;
    });
    const internalInstance = getCurrentInstance();
    // if(internalInstance && internalInstance.slots.default === undefined){
    //   internalInstance.slots.default = () => [h('div',{},'w')];
    // }
    // internalInstance && console.log('internalInstance',internalInstance.slots.default);
    watch(() => props.content , (newVal, oldVal) => {
      if(!internalInstance) return;
      if (isVNode(newVal)) {
        internalInstance.slots.default = () => [newVal];
        innerContent.value = '';
      } else {
        if(isVNode(oldVal) && !isVNode(newVal)){
          delete internalInstance.slots.default;
        }
        innerContent.value = newVal;
      }
    });
    return {
      visible,
      innerContent
    };
  }
});
</script>
